<!--
 * @Author: your name
 * @Date: 2021-08-24 13:45:33
 * @LastEditTime: 2021-09-07 16:28:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\silder.vue
-->
<template>
    <!-- ts 中使用 与 原生 使用 不同 -->

    <Sider
        :class="['bgs', ...getHeaderClass]"
        :collapsed="getAutoLayout ? getTriggersStatus : false"
    >
        <div class="applogo" :class="[...getHeaderClass]">
            <div class="applogo_img">
                <img src="@/assets/logo/logo.svg" alt="logo" />
            </div>
            <div class="applogo_name">Elk-Admin</div>
        </div>
        <div class="SilderCon">
            <Menu
                :open-keys="routerArr"
                :selected-keys="routerArr"
                :default-selected-keys="routerArr"
                mode="inline"
                style="background: transparent"
                class="silder"
                text-color="#fff"
            >
                <V-nav :datas="RouterList"></V-nav>
            </Menu>
        </div>
    </Sider>
</template>

<script lang="ts">
import { defineComponent, ref, computed, unref, watchEffect } from 'vue'
import { store } from '../store/index'
import { Layout, Menu } from 'ant-design-vue'
import { setTrigter, autoWindow } from '../setting/menuTrigger'
import { SetTheme } from '../setting/theme'
import { useRouter } from 'vue-router'
import VNav from './nav.vue'

export default defineComponent({
    name: 'Headers',
    components: {
        VNav,
        Sider: Layout.Sider,
        Menu,
    },
    setup() {
    // 监听窗口
    // 如果为移动端窗口 Menu状态处于 展开状态
        let { autoValue } = autoWindow()
        const getAutoLayout = computed(() => unref(autoValue.value))
        // 监听路由并设置侧边栏状态
        let router = useRouter()
        let routerArr = ref([])
        watchEffect(() => {
            let matched = router.currentRoute.value.matched
            routerArr.value = []
            matched.forEach((item) => {
                routerArr.value.push(item.name)
            })
        })
        // 响应式侧边栏

        let { menuTriggers } = setTrigter()
        const getTriggersStatus = computed(() => {
            const status = unref(menuTriggers)
            return status
        })
        let { themeColors } = SetTheme()
        // 响应式主题配置
        const getHeaderClass = computed(() => {
            const theme = unref(themeColors)
            return [`primary-${theme}-color`]
        })
        let collapsed = ref(false)
        let RouterList = store.state.routerArr
        return {
            collapsed,
            RouterList,
            getTriggersStatus,
            getHeaderClass,
            routerArr,
            getAutoLayout,
        }
    },
})
</script>
<style lang="less" scoped>
@import "../styles/commit.less";

.SilderCon {
  width: 100%;
  height: 90vh;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 0;
  height: 8px;
}

// ::-webkit-scrollbar-track {
//   background: transparent;
// }

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0.3);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(72, 73, 73);
}
.applogo {
  width: 200px;
  height: 50px;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in 0s;
  opacity: 0.9;
  & > div:nth-of-type(1) {
    width: 80px;
    text-align: center;
    //   background: red;
    img {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
  & > div:nth-of-type(2) {
    width: 5.5rem;
    font-size: 17px;
    color: #fff;
  }
}
</style>
